<template>
  <div class='left'>
    <hr>
    <p v-for="(item, index) in helpurls" :key="index" class="a" @click="getdetail(item.id)">{{item.title.rendered}}</p>
    <!-- <hr> -->
    <p></p>
    <!-- ul>li*3 -->
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- .red+tab -->
    <div class="red"></div>

    <a href=""></a>
    <!-- <link rel="stylesheet" href="style.css" type="text/csss"> -->
  </div>
</template>

<script>
export default {
  name: 'help',
  data () {
    return {
      helpurls: [],
      //protocolsId: null
    }
  },
  mounted () {
    this.$http
      .get('posts', { responseType: 'json' })
      //.get('http://10.211.4.115:8080/wp-json/wp/v2')
      .then(response => {
        this.helpurls = response.data
        // alert(JSON.stringify(this.helpurls))
      })
      .catch(error => {
        alert(error)
      })
  },
  methods: {
    getdetail (id) {
      alert("id:" + id)
      // this.$router.push('/detail/${id}')
      // this.$router.push({
      //   path: '/detail/${id}'
      // })
      //this.protocolsId = id;
      this.$router.push({
        path: `/detail`,
        query: {id: id}
      })
      // this.$router.push({
      //   name: 'detail',
      //   params: {
      //     params:{id: id}
      //   }
      // })
    }
  }

}
</script>

<style>
.a {
  color: blueviolet;
  font: initial bold 14px "微软雅黑"; /* 4个顺序不能变，最后两个不能省 */
}
.left {
  text-align: left;
  font-weight: normal;  /* 让粗体不加粗 */
  font-style: normal;
}
.bottom {
  bottom: 20px;
  position: absolute;
}
</style>

